<template>
	<!-- #ifdef MP-WEIXIN -->
	<uni-nav-bar :title="$t('account.home.heading_title')" :fixed="true" :statusBar="true"></uni-nav-bar>
	<!-- #endif -->

	<!-- #ifndef MP-WEIXIN -->
	<pheader :title="$t('account.home.heading_title')" :headerOpacity="headerOpacity">
		<template v-slot:right>
			<view class="header-edit-link" @click="proxy.$util.navigateTo('/pages/setting/index')">
				<uni-icons type="gear" size="32"></uni-icons>
			</view>
		</template>
	</pheader>
	<!-- #endif -->

	<view class="account-head">
		<view class="account-info">
			<view class="account-user">
				<view class="avatar" @click="proxy.$util.navigateTo('/pages/account/edit/index')">
					<image class="image" :src="account?.avatar || ''" mode="widthFix" />
				</view>
				<view class="user-info" @click="proxy.$util.navigateTo('/pages/account/edit/index')">
					<view class="name">{{ account?.name || $t('account.home.login_sign_in') }}</view>
					<view class="email" @click="handleCopy(account.sn)" v-if="account.sn">
						<text>{{ account.sn}}</text>
						<uni-icons customPrefix="icon-beikeshop" type="icon-beikeshopcopy" size="15"></uni-icons>
					</view>
				</view>
			</view>
			<view class="order-icons">
				<view class="title">
					<view class="text">{{ $t('account.home.t_order') }}</view>
					<view class="right"
						@click="proxy.$util.navigateTo('/pages/account/order/list/index', { current: 0 })">
						<text>{{ $t('common.view_all') }}</text>
						<uni-icons type="forward" size="16" color="#999"></uni-icons>
					</view>
				</view>
				<div class="items">
					<view class="item"
						@click="proxy.$util.navigateTo('/pages/account/order/list/index', { current: 1 })">
						<uni-icons custom-prefix="iconfont" type="icon-daifukuan" size="28"></uni-icons>
						<view class="text">{{ $t('account.home.t_unpaid') }}</view>
					</view>
					<view class="item"
						@click="proxy.$util.navigateTo('/pages/account/order/list/index', { current: 3 })">
						<uni-icons custom-prefix="iconfont" type="icon-daifahuo4" size="28"></uni-icons>
						<view class="text">{{ $t('account.home.t_unshipped') }}</view>
					</view>
					<view class="item"
						@click="proxy.$util.navigateTo('/pages/account/order/list/index', { current: 2 })">
						<uni-icons custom-prefix="iconfont" type="icon-daishouhuo1" size="28"></uni-icons>
						<view class="text">{{ $t('account.home.t_shipped') }}</view>
					</view>
					<view class="item" @click="proxy.$util.navigateTo('/pages/account/rmas/list/index')">
						<uni-icons custom-prefix="iconfont" type="icon-shouhou" size="28"></uni-icons>
						<view class="text">{{ $t('account.home.t_oreview') }}</view>
					</view>
				</div>
			</view>
		</view>

		<view class="head-bg">
			<image class="is-status-bar" src="@/static/image/account_home_bg.png"></image>
		</view>
	</view>

	<view class="account-content">
		<view class="links-wrap">
			<!-- <view class="title">常用功能</view> -->
			<uni-list class="uni-list-plus" :border="false">
				<uni-list-item :show-extra-icon="true"
					:extraIcon="{ customPrefix: 'iconfont', type: 'icon-daipingjia' }"
					:title="$t('account.home.t_edit')" link
					@click="proxy.$util.navigateTo('/pages/account/edit/index')"></uni-list-item>

				<!-- 				<uni-list-item :show-extra-icon="true" :extraIcon="{ customPrefix: 'iconfont', type: 'icon-dingdan1' }"
					:title="$t('account.home.t_order')" link @click="checkedSelect('order')"></uni-list-item>
					 -->
				<uni-list-item :show-extra-icon="true"
					@click="proxy.$util.navigateTo('/pages/account/address/list/index')"
					:extraIcon="{ customPrefix: 'iconfont', type: 'icon-dizhi1' }" :title="$t('account.home.t_address')"
					link></uni-list-item>
				<uni-list-item :show-extra-icon="true" @click="proxy.$util.navigateTo('/pages/account/wishlists/index')"
					:extraIcon="{ customPrefix: 'iconfont', type: 'icon-shoucang1' }"
					:title="$t('account.home.t_wishlist')" link></uni-list-item>

				<uni-list-item :show-extra-icon="true" @click="proxy.$util.navigateTo('/pages/account/sign-in/sign-in')"
					:extraIcon="{ customPrefix: 'icon-beikeshop', type: 'icon-beikeshopqiandao' }"
					:title="$t('account.home.signin')" link></uni-list-item>
				<uni-list-item :show-extra-icon="true"
					@click="proxy.$util.navigateTo(`/pages/account/withdraw/withdraw?balance=${account.balance}`)"
					:extraIcon="{ customPrefix: 'icon-beikeshop', type: 'icon-beikeshoptixianzhanghu' }"
					:title="$t('account.home.withdraw')+`(${account.balance})`" link v-if="account"></uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script setup>
	import pheader from '@/components/header';
	import {
		useI18n
	} from 'vue-i18n'
	const {
		t
	} = useI18n()
	const {
		proxy
	} = getCurrentInstance();

	let account = ref(null);
	let headerOpacity = ref(0);
	// onMounted(async () => {
	//   await $http.get("account/me").then((res) => {
	//     account.value = res
	//   })
	// })
	onShow(() => {
		proxy.$util.setTabBarLanguage();
		account.value = uni.getStorageSync('account');
		loadData();
	});

	const loadData = () => {
		proxy.$http.get('me', null, {
			hload: false
		}).then(res => {
			account.value = res;
			uni.setStorageSync('account', res);
		});
	};
	// 处理复制邀请码
	const handleCopy = (data) => {
		uni.setClipboardData({
			data,
			success: res => {
				proxy.$util.msg(t('account.home.copy_success'));
			}
		})
	}

	const checkedSelect = type => {
		if (!account) {
			uni.navigateTo({
				url: '/pages/account/login/login',
			});
			return;
		}

		console.log(type);
	};

	const viewUser = () => {
		let url = '/pages/account/user/user';
		if (!account.value) {
			url = '/pages/account/login/login';
		}

		uni.navigateTo({
			url,
		});
	};

	// headerOpacity
	onPageScroll(e => {
		headerOpacity.value = e.scrollTop / 100;
	});

	onPullDownRefresh(() => {
		loadData();
	});
</script>

<style lang="scss" scoped>
	@import './home.scss';
</style>